import React, { Component } from 'react'
import { Routes, Route, Link, useNavigate } from "react-router-dom";
import Detail from "./Detail";

function Message() {
  const state={
    messageArr: [
      {id: '01', title: '消息1'},
      {id: '02', title: '消息2'},
      {id: '03', title: '消息3'},
    ]
  }
  const navigate = useNavigate();

  const replaceShow = (id, title) => {
    // 编写一段代码,让其实现跳转到Detail组件,且为replace跳转 携带params参数
    //v5版本
    //replace+携带params参数
    // this.props.history.replace(`/home/message/detail/${id}/${title}`) v5用法
    //replace跳转+携带search参数
    // this.props.history.replace(`/home/message/detail?id=${id}&title=${title}`) v5用法
    //replace跳转+携带state参数
    // this.props.history.replace(`/home/message/detail`, {id,title}) v5用法


    // v6版本
    //replace+携带params参数
    // navigate(`/home/message/detail/${id}/${title}`, {replace:true}); //v6用法, replace模式

    //replace跳转+携带search参数
    // navigate(`detail?id=${id}&title=${title}`, {replace:true});//v6

    //replace跳转+携带state参数
    navigate(`detail`, {replace:true, state:{id,title}});//v6
  }

  const pusheShow = (id,title) => {
    // 编写一段代码,让其实现跳转到Detail组件,且为replace跳转 携带params参数

    // v5版本
    //push+携带params参数
    // this.props.history.push(`/home/message/detail/${id}/${title}`) v5用法
    //push+携带search参数
    // this.props.history.push(`/home/message/detail?id=${id}&title=${title}`) v5用法
    //push+携带state参数
    // this.props.history.push(`/home/message/detail`, {id,title}) v5用法

    // v6版本
    //push+携带params参数
    // navigate(`/home/message/detail/${id}/${title}`); v6
    //push+携带search参数
    // navigate(`detail?id=${id}&title=${title}`); //v6
    //push+携带state参数
    navigate(`detail`, {state:{id,title}}); //v6
  }

  const goForward = () => {
    navigate(1);
  }

  const back = () => {
    navigate(-1);
  }

  const {messageArr} = state
  return (
    <>
      <ul>
        {
          messageArr.map(item => {
            return <li key={item.id}>
              {/* 想路由组件传递params参数 */}
                      <Link to={`detail?id=${item.id}&title=${item.title}`} >{item.title}</Link>
                      &nbsp;<button onClick={() => pusheShow(item.id, item.title)}>push查看</button>
                      &nbsp;<button onClick={() => replaceShow(item.id, item.title)}>replace查看</button>
              {/* 向路由组件传递search参数 */}
              {/* <Link to={`detail?id=${item.id}&title=${item.title}`}>{item.title}</Link> */}

              {/* 向路由组件传递state参数 */}
              {/* 增加replace属性 开启替换模式, 普通为压栈,开启后换为替换模式 */}
              {/* <Link replace={true} to='detail' state={{id:item.id, title: item.title}}>{item.title}</Link> */}
              {/* <Navigate to="/detail" state={{id:item.id, title: item.title}} /> */}

                  </li>
          }) 
        }
      </ul>
      <hr/>
      <Routes>
        {/* 声明接收params参数 */}
        {/* <Route path="detail/:id/:title" element={<Detail/>} ></Route> */}

        {/*serach参数无需声明接收,正常注册路由即可 */}
        {/* <Route path="detail" element={<Detail/>} ></Route> */}
        
        {/*serach参数无需声明接收,正常注册路由即可 */}
        <Route path="detail" element={<Detail/>} ></Route>
      </Routes>

      <button onClick={goForward}>前进</button>
      <button onClick={back}>后退</button>
    </>
  )
}

export default Message

 class aaMessage extends Component {
  state={
    messageArr: [
      {id: '01', title: '消息1'},
      {id: '02', title: '消息2'},
      {id: '03', title: '消息3'},
    ]
  }
  replaceShow = (id, title) => {
    // 编写一段代码,让其实现跳转到Detail组件,且为replace跳转
    this.props.history.replace(`/home/message/detail/${id}/${title}`)
  }
  render() {
    const {messageArr} = this.state
    return (
      <>
        <ul>
          {
            messageArr.map(item => {
              return <li key={item.id}>
                {/* 想路由组件传递params参数 */}
                        <Link to={`detail/${item.id}/${item.title}`} >{item.title}</Link>
                        &nbsp;<button onClick={() => this.pusheShow(item.id, item.title)}>push查看</button>
                        &nbsp;<button onClick={() => this.replaceShow(item.id, item.title)}>replace查看</button>
                {/* 向路由组件传递search参数 */}
                {/* <Link to={`detail?id=${item.id}&title=${item.title}`}>{item.title}</Link> */}

                {/* 向路由组件传递state参数 */}
                {/* 增加replace属性 开启替换模式, 普通为压栈,开启后换为替换模式 */}
                {/* <Link replace={true} to='detail' state={{id:item.id, title: item.title}}>{item.title}</Link> */}
                {/* <Navigate to="/detail" state={{id:item.id, title: item.title}} /> */}

                    </li>
            }) 
          }
        </ul>
        <hr/>
        <Routes>
          {/* 声明接收params参数 */}
          <Route path="detail/:id/:title" element={<Detail/>} ></Route>

          {/*serach参数无需声明接收,正常注册路由即可 */}
          {/* <Route path="detail" element={<Detail/>} ></Route> */}
          
          {/*serach参数无需声明接收,正常注册路由即可 */}
          {/* <Route path="detail" element={<Detail/>} ></Route> */}
        </Routes>
      </>
    )
  }
}
